<template>
  <div class="module scrollbar">
    <div>
      <div class="chart-item-wrap" v-for="(item, i) in list" :key="item.appID">
        <div class="title" :title="item.appName">
          <span>{{item.appName}}</span>
          <svg-icon class="icon" icon-class="icon_stars"></svg-icon>
        </div>
        <div class="chart-item" :id="'bar-2-' + i"></div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import { realPx } from "@/utils/common";
import { rtoRpoInfo } from "@/api/api-mock";
export default {
  data() {
    return {
      list: [],
      myChartList: []
    };
  },
  mounted() {
    // 根据数据来渲染echarts
    rtoRpoInfo().then(res => {
      if (res.success) {
        this.list = res.obj;
        this.$nextTick(() => {
          this.renderEcharts();
          setTimeout(this.resize, 0);
        });
      }
    });
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
  methods: {
    getOption(obj) {
      const yAxisData = [
        Number(obj.keyRtoValue) || 0,
        Number(obj.keyRpoValue) || 0
      ];

      var option = {
        backgroundColor: "transparent",
        grid: {
          left: realPx(500),
          top: "15%",
          bottom: "15%",
          right: "12%"
        },
        tooltip: {
          trigger: "item",
          position: "top",
          formatter: "{b}: {c} min"
        },
        xAxis: {
          type: "value",
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          inverse: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(107, 123, 176, 1)",
              width: realPx(10)
            }
          },
          axisTick: {
            show: false
          },
          data: ["RTO", "RPO"],
          axisLabel: {
            interval: 0, // 显示全部标签
            margin: realPx(300),
            fontSize: realPx(110),
            align: "left",
            color: "rgba(167, 210, 237, 1)"
          }
        },
        series: [
          {
            type: "bar",
            barWidth: realPx(108),
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "rgba(48, 66, 240, 1)" },
                  { offset: 1, color: "rgba(59, 234, 255, 1)" }
                ])
              }
            },
            data: yAxisData
          }
        ]
      };
      return option;
    },
    renderEcharts() {
      this.myChartList = [];
      for (let i = 0; i < this.list.length; i++) {
        var myChart = echarts.init(document.getElementById("bar-2-" + i));
        let option = this.getOption(this.list[i]);
        myChart.setOption(option);
        this.myChartList.push(myChart);
      }
    },
    resize() {
      for (let i = 0; i < this.myChartList.length; i++) {
        this.myChartList[i].resize();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.module {
  width: 100%;
  height: 100%;
  font-size: 0;
  .chart-item-wrap {
    display: inline-block;
    width: 154px;
    height: 130px;
    .title {
      font-size: 12.3px;
      color: #fff;
      height: 46px;
      line-height: 46px;
      text-align: left;
      padding-left: 18px;
      span {
        vertical-align: middle;
        display: inline-block;
        white-space: nowrap;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .icon {
        vertical-align: middle;
        width: 20px;
        margin-left: 10px;
      }
    }
    .chart-item {
      width: 100%;
      height: 84px;
    }
  }
}
</style>
